<template>
    <div class="wh-100" style="background-color: white">
        <div style="height: 60px" class="d-flex-align-center bor-base-b  pl-24 fw-6 fs-18">
            招聘简章审核
        </div>
        <div class="h-80 bor-base-b">
            <div class="h-10 d-flex-align-center bor-base-b">
                <div class="w-15 py-12 pl-24 mr-auto ">
                    <Button style="background-color: white" @click="download">导出数据</Button>
                    <Button type="dashed" @click="changeTip">{{ openTip ? '关闭提示' : '开启提示' }}</Button>
                </div>
                <div class="w-65 pl-100  d-flex-align-center">
                        <Select class="ml-auto w-10" v-model="params.status" placeholder="请选择">
                            <Option v-for="item in stateSelection" :key="item.value"  :value="item.value">{{item.label}}</Option>
                        </Select>
                    <div class="w-30 ml-8 d-flex">
                        <Input class="w-70" placeholder="请输入标题名"   @on-keyup="params.titleSearch=params.titleSearch.replace(/\s/g,'')" v-model="params.titleSearch"></Input>
                        <Button style="background-color: #1890ff;color: white" @click="search">搜索</Button>
                    </div>
                </div>
            </div>
            <div class="h-90 ">
                <Alert v-show="openTip" show-icon>
                    已选择
                    <span >{{ selectList.length }}</span>
                    项
                    <a @click="toggleSelection">清空</a>
                </Alert>
                <el-table class="el-overflow-auto-hidden" :header-cell-style="{ background: $backColor,color: '#333333' }" empty-text="暂无数据" :data="tableData"
                          :height="heightNmber"
                          width="100%"
                          @selection-change="handleSlectionChange"
                          style="width: 100%" v-loading="loading">
                    <el-table-column type="selection" width="55"></el-table-column>
                    <el-table-column v-for="column in tableColumns" :key="column.prop" :prop="column.prop" :label="column.label"></el-table-column>
                    <el-table-column prop="state" label="状态" fixed="right">
                        <template #default="scope">
                            <el-link v-if="scope.row.status === 0" type="primary" :underline="false">待审核</el-link>
                            <el-link v-if="scope.row.status === 1" type="success" :underline="false">已通过</el-link>
                            <el-link v-if="scope.row.status === 2" type="danger" :underline="false">已拒绝</el-link>
                        </template>
                    </el-table-column>
                    <el-table-column prop="isTop" label="置顶排序" fixed="right">
                        <template #default="scope">
                            <div class="d-flex-align-center">
                                <div class="d-flex mr-8">
                                    <el-button @click="forTop(scope.row)" type="text" class="fs-12">
                                        置顶
                                    </el-button>
                                </div>
                                <div class="fs-12">排序：{{ scope.row.sortOrder }}</div>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="state" label="操作" fixed="right">
                        <template #default="scope">
                            <!--              <el-button-->
                            <!--                  v-if="scope.row.status === 0"-->
                            <!--                  @click="examineJump(scope.row.id)"-->
                            <!--                  type="text"-->
                            <!--                  size="small">-->
                            <!--                审核-->
                            <!--              </el-button>-->
                            <el-button @click="examineJump(scope.row.id)" type="text" size="small">
                                审核
                            </el-button>
                            <el-button type="text" size="small" @click="viewDetails(scope.row.id)">
                                查看
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
        <div class="h-10 fs-14 d-flex-center">
            <Page show-total :total="pageTotal" :current="params.pageNumber" :page-size="params.pageSize" @on-change="changePage" @on-page-size-change="changePageSize" show-sizer show-elevator />
        </div>
        <el-dialog title="置顶排序" :visible.sync="topDialogFormVisible" class="">
            <div class="px-24 fs-14">
                <div class="bor-base-b bor-base-t mt-12" style="">
                    <el-form ref="form" :model="topForm" label-width="100px">
                        <el-form-item label="是否置顶" class="mt-12">
                            <el-radio-group v-model="topForm.isTop">
                                <el-radio :label="true">是</el-radio>
                                <el-radio :label="false">否</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="排序">
                            <el-input type="number" v-model="topForm.sortOrder" style="width: 15%"></el-input>
                            <span style="color: #909399; margin-left: 20px">数字越小约靠前，0不参与置顶排序，根据发布时间排序</span>
                        </el-form-item>
                    </el-form>
                </div>
                <div class="py-12" style="height: 70px">
                    <el-button type="primary" style="float: right; margin-left: 12px" @click="topSubmit">确定</el-button>
                    <el-button style="float: right" @click="topClose">取消</el-button>
                </div>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import { getRecruitmentBrochureAPI, exportDataAPI, recruitmentBrochureAtTheTopAPI } from '../../../api/bys/recruitmentManagement/index';
import { recruitAuditExportAPI } from '@/api/Main/viewDetailsAboutADoubleMeetingApis';
export default {
    data() {
        return {
            loading: false,
            modelSelection: '',
            stateSelection: [
                {
                    label: '全部状态',
                    value: '全部'
                },
                {
                    label: '待审核',
                    value: '待审核'
                },
                {
                    label: '已通过',
                    value: '已通过'
                },
                {
                    label: '已拒绝',
                    value: '已拒绝'
                }
            ],
            modelPosition: '',
            positionSelection: [],
            pageTotal: 0,
            params: {
                pageNumber: 1,
                pageSize: 10,
                status: '全部',
                titleSearch: ''
            },
            tableData: [],
            tableColumns: [
                { prop: 'title', label: '标题' },
                { prop: 'enterpriseName', label: '单位名称' },
                { prop: 'pshTime', label: '发布时间' },
                { prop: 'recEndTime', label: '过期时间' }
            ],
            topDialogFormVisible: false,
            topForm: {
                isTop: true,
                sortOrder: 0,
                brochureId: ''
            },
            heightNmber:'95%',
            openTip:true,
            selectList:[],
        };
    },
    mounted() {
        this.getRecruitmentBrochureList();
    },
    methods: {
        handleSlectionChange(selection) {
            this.selectList=selection
            console.log(selection, '选中行的数据');
        },
        changeTip(){
            this.openTip = !this.openTip
            if(this.openTip){
                this.heightNmber='95%'
            }else{
                this.heightNmber='100%'
            }
        },
        toggleSelection() {
            this.$refs.multipleTable.clearSelection();
        },
        forTop(row) {
            this.topDialogFormVisible = true;
            this.topForm.sortOrder = row.sortOrder;
            this.topForm.brochureId = row.id;
        },
        topClose() {
            this.topDialogFormVisible = false;
        },
        topSubmit() {
            recruitmentBrochureAtTheTopAPI(this.topForm).then(res => {
                if (res.success) {
                    this.$Message.success(res.message);
                }
                this.topDialogFormVisible = false;
                this.getRecruitmentBrochureList();
            });
        },
        getRecruitmentBrochureList() {
            this.loading = true;
            getRecruitmentBrochureAPI(this.params)
                .then(res => {
                    if (res.success) {
                        this.loading = false;
                        console.log(res.result, '123456');
                        this.tableData = res?.result?.records || [];
                        console.log(this.tableData);
                        this.pageTotal = res?.result?.total || 0;
                    } else {
                        this.loading = false;
                        this.tableData = [];
                    }
                })
                .catch(err => {
                    console.log(err);
                    this.loading = false;
                });
        },
        viewDetails(id) {
            this.$router.push({ path: '/examine', query: { id: id, isShow: false } });
        },
        download() {
            let ids = [];
            this.selectList.forEach(function(e) {
                console.log(e.id);
                ids.push(e.id)
            });
            recruitAuditExportAPI({ids: ids}).then(res => {
                this.importing1 = false;
                // type的格式可以可以设置，可以把appcation/json设置进去，然后设置导出的类型
                const blob = new Blob([res], { type: 'charset=utf-8' });
                let url = window.URL.createObjectURL(blob);
                const link = document.createElement('a');
                link.style.display = 'none';
                link.href = url;
                link.setAttribute('download', '招聘简章信息.xlsx');
                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link); // 删除节点
                window.URL.revokeObjectURL(url); //释放该 url
            });
        },
        // endregion
        // region TODO 搜索
        search() {
            this.params.pageNumber = 1
            this.getRecruitmentBrochureList();
        },
        // endregion
        // 跳转审核
        examineJump(id) {
            console.log('传递的参数是：' + id);
            this.$router.push({ path: '/examine', query: { id: id, isShow: true } });
        },
        changePage: function(val) {
            this.params.pageNumber = val;
            this.getRecruitmentBrochureList();
        },
        changePageSize: function(val) {
            this.params.pageSize = val;
            this.getRecruitmentBrochureList();
        }
    }
};
</script>
